<script setup lang="ts">
const defaultFomr = {
  question: 1,
  answer: '',
  password: '',
  code:'',
}
let form = reactive(defaultFomr);
</script>

<template>
  <div>
    <AuthenText>
<pre>
操作保护设置说明：
1、为了更好的保障您的账户域名、资金安全，本站特增加此功能，保护您的账户安全；
2、本功能解除账户安全保护，并非是把账户的操作保护答案给清除了，只是让您账户在本次登录中无限制操作；
3、账户保护状态一旦解除，那么您本次登录可执行任何关键操作，如：转出域名，Push域名，等等关键操作；
4、解除保护后，账户的任何操作系统将默认为是您本人操作，引起的一切问题您自行承担；
5、本次解除后，可手动开启账户保护状态；
6、账户安全保护状态每次账户退出或重新登录自动开启，解除需每次手动解除保护；
</pre>
    </AuthenText>
    <el-card class="flex-1">
      <el-form label-suffix="：" label-width="80px" class="w-1/2 mx-52">
        <div class="text-[var(--el-color-primary)] pl-20 my-5">您的账号正在安全保护状态</div>
        <el-form-item label="您的问题">
          你最亲近的（家人、朋友）的人的姓名
        </el-form-item>
        <el-form-item label="您的答案">
          <el-input placeholder="请填写你的答案" v-model="form.answer" clearable></el-input>
        </el-form-item>
        <el-form-item label="账户密码">
          <el-input placeholder="请填写你的账户密码" v-model="form.password" clearable></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div style="display: grid;grid-template-columns: 1fr 80px;width: 100%;">
            <div>
              <el-input  placeholder="请填写验证码" v-model="form.code" clearable></el-input>
            </div>
            <div class="w-20 h-10 mr-4"><img src="" alt=""></div>
          </div>
        </el-form-item>
        <div class="text-center"><el-button type="primary">提交</el-button></div>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped lang="scss">

</style>